干净的 UI 指南：UI 设计中层次结构和平衡的 10 个示例

那么什么是干净的用户界面？简而言之，它与视觉效果无关，而与实现特定最终用户目标的难易程度有关。总的来说，Clean UI 描述了它里面的一切都不会减慢速度，而是相反，“推动”人们在与之交互时采取行动。这样的用户界面主要基于交互性和极简主义。

然而，这些还不是它的全部特征。我们决定进行详细研究，并根据 Adam Wathan 和 Steve Schoger 合着的精彩书籍“重构 UI”的材料，考虑本书中涉及的层次结构和平衡实施问题的最成功示例。

虽然在时尚界，没有人长期遵守任何规则，但在数字设计的情况下，仍然必须有规则，尤其是在保持界面“干净”方面。因此，与其关注“嘴唇和眼睛”，不如首先考虑应该在您的 UI 中突出显示的内容。通常，重音伴随着优先功能，使最终用户能够访问数字产品的基本功能。

与其收集一系列匹配良好的颜色，不如尝试使界面采用相同的配色方案，“玩”色调的强度。有时，与更改字体大小相比，它使最终用户更清楚特定功能的优先级。这种方法将使界面易于阅读，同时，您不必“调整”微小的字母来指示不太重要的元素。

如果你遇到不知道如何突出界面主要元素的问题，也许你应该换一种方式，减少对次要元素的强调。请记住，您不必在茶中加入七勺糖来使其变甜——只要在其中加入几勺糖并与糖尿病饼干一起食用就足够了。

设计师的工作并不总是自由的。例如，当您向最终用户演示内容时，您可能会遇到以“标签：值”格式显示它们的问题，这使得创建任何类型的层次结构变得更加困难（因为在这种情况下，所有元素将相等）。这就是为什么有时放弃这种查看内容的方式是有意义的，以免限制自己的行动。

有时设计师错误地关注标题，而标题下面的内容被赋予了次要的重要性。在创建简洁 UI 的上下文中，这是错误的方法，因为视觉层次结构被打破了——毕竟，对每个人来说，获得美味而不仅仅是美丽的糖果很重要。

您可能已经注意到，图标通常会占用大量空间并且看起来“很重”，尤其是当它们位于文本旁边时。因此，要使界面看起来平衡，请尝试降低这些元素的对比度。这种低资源行动将帮助您以积极的方式改变您的设计。

如果您的用户需要同时在同一个屏幕上执行多个操作，那么您不应该只受限于语义。最好考虑允许用户执行这些操作的元素所在的层次顺序。通过这种方式，您将提供一个直观的界面，而不会用不必要的细节使其过载。

如果您想采用最简单的方法，请记住干净的 UI 首先是充分使用空白。不要让 UI 元素“难以呼吸”——即使是精心构建的层次结构，您也有可能失去那种“干净”的感觉。只要使用这个技巧，你就会对结果感到惊讶：尤其是，苹果的品牌设计年复一年地继续印证着这个规则。

如果您在开始处理您的项目之前为您的项目创建一个间距和大小调整系统，您将不会遇到绝大多数设计师面临的许多界面设计问题。对于那些习惯于使用浏览器工具的人来说尤其如此。

网格系统允许元素根据百分比在它们的大小之间具有最佳比例。这种方法在很多情况下都“有效”，但在 Clean UI 的背景下，它不能被视为圣杯。事实上，在某些情况下，特定元素最好保留固定大小，因此为了工作结果的利益，您应该摆脱这些“绑定”。